/**
 * @file
 * @author ruanairuo(ruanairuo@baijia.com)
 * @date 2020-01-07
 */
/* eslint-disable react/jsx-key */
import React, {useEffect, useState} from 'react';
import {Row, Col, Typography} from 'antd';
import {numberHandle} from '~/utils/number';
import CommonCard from '../../../common/CommonCard';

const {Title} = Typography;

const ORDERNUM = '订单数';
const AVERAGE = '人均成本';
const ALLCOST = '总消耗';

export default function PayBoardCard(props) {
    const {unitId, unitName, loading, data, onDownload, onDetail, excelData} = props;
    return (
        <CommonCard
            title={unitName}
            content={(
                <div style={{width: '100%'}} className="pay-board-card-text">
                    {
                        data?.cardValues?.map(ele => (
                            <div className="pay-board-card-text-title">
                                {numberHandle(ele.value, 2)}
                            </div>
                        ))
                    }
                    {
                        excelData?.cardValues.map(item => (
                            <Row style={{width: '100%'}} className="pay-board-card-text-content">
                                <Col span={10} style={{marginBottom: 12}}>
                                    {item.name}：
                                </Col>
                                <Col span={14}>
                                    {numberHandle(item.value, 2)}
                                </Col>
                            </Row>
                        ))
                    }
                </div>
            )}
            span={24}
            loading={loading}
            cardId={unitId}
            key={unitId}
            onDownload={onDownload}
            onDetail={onDetail}
            height={180}
        />
    );
}
